<template>
  <div>
    <a-row>
      <a-form-model :model="form" ref="ruleForm" :rules="formRules">
        <a-col :lg="{ span: 5, offset: 8 }" :md="{ span: 7, offset: 8 }">
          <a-form-model-item label="侧边栏用户名" prop="author">
            <a-input v-model="form.author" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="{ span: 5, offset: 8 }" :md="{ span: 7, offset: 8 }">
          <a-form-model-item label="侧边栏个人简介" prop="word">
            <a-input v-model="form.word" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="{ span: 5, offset: 8 }" :md="{ span: 7, offset: 8 }">
          <a-form-model-item label="侧边栏头像" prop="icon_src">
            <a-upload
              list-type="picture-card"
              class="avatar-uploader"
              :file-list="fileList"
              :customRequest="uploadimg"
            >
              <img
                :src="form.icon_src"
                alt="avatar"
                style="width: 150px; height: 150px"
              />
            </a-upload>
          </a-form-model-item>
        </a-col>
        <a-col :lg="{ span: 5, offset: 8 }" :md="{ span: 7, offset: 8 }">
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit"> 提交 </a-button>
          </a-form-model-item>
        </a-col>
      </a-form-model>
    </a-row>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getConfig();
  },
  data() {
    return {
      // 网站配置的表单
      form: {
        author: "",
        word: "",
        icon_src: "",
      },
      formRules: {
        author: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 10, message: "用户名长度不能超过10", trigger: "blur" },
        ],
        word: [{ required: true, message: "请输入个人简介", trigger: "blur" }],
      },
      // 文件
      fileList: [],
    };
  },
  methods: {
    // 获取配置信息
    getConfig() {
      this.$axios.get("/api/util/myconfig.php").then((res) => {
        const { data } = res;
        if (data.code === 1) {
          this.form = {
            author: data.data[0].author,
            word: data.data[0].word,
            icon_src: data.data[0].icon_src,
          };
          this.$message.success(data.msg);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 提交表单
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$axios
            .post("/api/util/editconfig.php", this.form)
            .then((res) => {
              const { data } = res;
              if (data.code === 1) {
                this.getConfig();
                this.$message.success(data.msg);
              } else {
                this.$message.error(data.msg);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 上传图片
    uploadimg(file) {
      const reader = new FileReader();
      reader.readAsDataURL(file.file); // 读取图片文件

      reader.onload = (file) => {
        const params = {
          myBase64: file.target.result, // 把 本地图片的base64编码传给后台，调接口，生成图片的url
        };
        this.$axios.post("/api/upload/upload.php", params).then((res) => {
          if (res) {
            const icon_src = this.imgUrl + res.data.data.src;
            this.form.icon_src = icon_src;
            this.$message.success("上传成功");
          } else if (res.file.status === "error") {
            this.$message.error("图片插入失败");
          }
        });
      };
    },
  },
};
</script>
